<!DOCTYPE html>
<html>
<head>
	<title>EaselJS Example: Circles</title>
   
	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
	<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
		 http://code.createjs.com -->

<script id="editable">
    window.log = console.log;
	var canvas;
	var stage;
	var tweens;
	var activeCount;
	var circleCount = 25;
	var text;
    var cacheCount = circleCount;
	function init() {
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);
        createjs.Touch.enable(stage);
		stage.enableDOMEvents(true);
		tweens = [];
		stage.enableMouseOver(10);

        
		for (var i = 0; i < circleCount; i++) {
			// draw the circle, and put it on stage
            var image = new createjs.Bitmap("https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png").set({ x:0, y:0, alpha:0.5,scaleX:0.5,scaleY:0.5,visible:false});
     
			// var tween = createjs.Tween.get(image)
            //            .to({x: 275, y: 200}, (0.5 + i * 0.04) * 1500, createjs.Ease.bounceOut)
            //            .call(tweenComplete);
			//tweens.push({tween: tween, ref: image});
            tweens.push({ref: image});
            stage.addChild(image)
		}
		activeCount = circleCount;
        createjs.Touch.enable(stage,true,false);
		stage.addEventListener("stagemousedown", handleMouseDown);
        stage.addEventListener("stagemouseup", stagemouseup);
 
        createjs.Ticker.setFPS(60);
		createjs.Ticker.addEventListener("tick", tick);
	}

    function stagemouseup(){
        log("mouseup______________")
        stage.off("stagemousemove",handleMouseMove)
        for (var i = 0; i < circleCount; i++) {
			var ref = tweens[i].ref;
			var tween = tweens[i].tween;
            createjs.Tween.get(ref)
            .to({visible:false})
            .call(tweenComplete);
		    // createjs.Tween.get(tweens[i].ref).to({visible:false})
		}
    }
    function handleMouseDown(event){
        log("mouse down")
        for (var i = 0; i < circleCount; i++) {
			var ref = tweens[i].ref;
			var tween = tweens[i].tween;
			createjs.Tween.get(ref)
            .to({x: stage.mouseX, y: stage.mouseY,visible:true})
            .call(tweenComplete);
		}
        circleCount = cacheCount
        stage.addEventListener("stagemousemove", handleMouseMove);
    }

	function handleMouseMove(event) {
        log("mousemove")
		for (var i = 0; i < circleCount; i++) {
			var ref = tweens[i].ref;
			var tween = tweens[i].tween;
			createjs.Tween.get(ref, {override: true})
            .to({x: stage.mouseX, y: stage.mouseY}, i * 10)
            .call(tweenComplete);
		}
		activeCount = circleCount;
	}

	function tweenComplete() {
		// activeCount--;
	}

	function tick(event) {
		if (activeCount) {
			stage.update(event);
		}
	}

</script>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    body,html{
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
    }
</style>
</head>
<body onload="init();">

<canvas id="testCanvas" style="background:#000;width: 100%;height: 100%;"></canvas>

</body>
</html>
